<template>
	<div class="container">
		<template v-if="flowLineData">
			<div style="display:flex;justify-content: space-between;">
				<div>
					<div style="font-size:22px;">名称： {{ flowLineData.name }}</div>
					<!-- <div> 模块:{{ flowLineData.module_id }}</div> -->
					<div>创建时间:{{ formatTime(flowLineData.create_time) }}</div>
				</div>
				<div>
					<div>
						<flow-model ref="flowModelRef" :module-id="flowLineData.module_id" :item-id="flowLineData.item_id" :show-flow-node-select="true" :show-flow-status="false" @change="changeFlowStatusData2"></flow-model>
					</div>
				</div>
			</div>
			<a-divider style="height: 2px; background-color: #7cb305" />
			<a-timeline>
				<template v-for="item in flowLineData.flowLines" :key="item.id">
					<a-timeline-item v-if="item.node_id !== 0 ">
						<!-- 最后一条没 下一节点 -->
						<!-- {{item}} -->
						<!-- </a-timeline-item>
					<a-timeline-item
						v-else
						color="red"
						>-->
						<template #dot>
							<clock-circle-outlined style="font-size: 16px" />
							<a-avatar :size="24" :style="item.node_id == nodeId?' background-color: #87d068':''">
								<template #icon>
									<span>{{ item.flowNode?item.flowNode.no : 0 }}</span>
								</template>
							</a-avatar>
						</template>
						<div>
							<div v-if="item.flowNode">{{ item.flowNode.name }}</div>
							<!-- <div>
								节点号:{{ item.nextflowNode.no }}
							</div>-->
							<div>操作时间:{{ formatTime(item.create_time) }}</div>
							<div>
								操作员:
								<span>{{ item.user.fullname }}</span>
								<flow-line-status :status="item.status"></flow-line-status>
								<div v-if="item.remark">备注:{{ item.remark }}</div>
							</div>
						</div>
					</a-timeline-item>
					<a-timeline-item v-if="item.next_node_id === 0 ">
						<!-- 最后的节点 没操作节点-->
						<!-- {{item}} -->
						<template #dot>
							<clock-circle-outlined style="font-size: 16px" />
							<a-avatar :size="24" :style="'background-color: #87d068'">
								<template #icon>
									<span>ok</span>
								</template>
							</a-avatar>
						</template>
						<div>结束</div>
					</a-timeline-item>
				</template>
				<!-- {{ getEndNodeLine() }} -->
			</a-timeline>
		</template>
	</div>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance, watch, onMounted } from "vue";
import dayjs from "dayjs";

// import flowNodeModel from "@/plugins/flowNodeModel";
import { useRoute } from "vue-router";
import { post } from "../utils";
import router from "../router";
const route = useRoute();
const flowId = ref(0);
const nodeId = ref(0);
const visible = ref(false);
const flowModelRef = ref(null);
const flowStatus = ref();
flowStatus.value = [
	{ status: -1, name: "退回" },
	{ status: 0, name: "待审核" },
	{ status: 1, name: "通过" },
	{ status: 2, name: "完成" }
];
const formatTime = (d, fmt = "YYYY-MM-DD HH:mm:ss") => {
	return dayjs(d).format("YYYY-MM-DD HH:mm:ss");
};
const getStatus = num => {
	return flowStatus.value.find(e => e.status === num);
};
const showModal = () => {
	flowModelRef.value.showModal({ flowId: flowId.value });
};

const handleOk = e => {
	//console.log(e);
	visible.value = false;
};
const flowNodeLineData = ref();

const initNodeLineData = () => {
	post("flow/getFlowNodeLine", { id: nodeId.value }).then(data => {
		//console.log(data);
		flowNodeLineData.value = data;
		// flowTypeSource.value = data.map((d) => {
		// 	return d;
		// });
	});
};
const flowLineData = ref();
const getEndNodeLine = () => {
	if (flowNodeLineData.value && flowNodeLineData.value.length) {
		return flowNodeLineData.value[flowNodeLineData.value.length - 1];
	}
};
const initFlowLineData = () => {
	post("flow/getFlowLineAll", { id: flowId.value }).then(data => {
		//console.log(data);
		flowLineData.value = { ...data };

		// flowTypeSource.value = data.map((d) => {
		// 	return d;
		// });
	});
};
flowId.value = route.query.flow_id;
nodeId.value = route.query.node_id;
const changeFlowStatusData2 = () => {
	initFlowLineData();
};
onMounted(e => {
	initFlowLineData();
});
</script>

<style scoped lang="less">
.container {
	background: #fff;
	padding: 12px;
}
</style>